<template>
  <article class="audition2">
    <!-- <v-md-preview :text="text" /> -->
    <h3>优点</h3>
    <p>1. 统一的网络标准</p>
    <span>html5 本身是由W3C推出的，它的开发集成了众多大型公司的技术支持。</span>
    <p>2. 多设备跨平台</p>
    <span>html5在不同的浏览器和平台上都有广泛的支持。同一套代码，在不同浏览器和平台上均可以使用。</span>
    <p>3. 自适应页面设计，能适应不同大小的屏幕</p>
    <span>这种响应式设计体现在：</span><br />
    <span>3-1. meta标签的viewport配置</span><br />
    <code class="code">
      {{_code1}}
    </code><br />
    <span>3-2. 自动或百分比的值，比如</span><br />
    <code class="code">
      width: auto;<br />
      width: 50%;
    </code><br />
    <span>3-3. 字体大小设定</span><br />
    <code class="code">
      html {<br />
        <span class="indient">font-size: 62.5%;</span><br />
      }
    </code><br />
    <span>3-4. 流动布局</span><br />
    <span>各个区块都是浮动的，如果同一行放不下这么多盒子，盒子会自动转移到下一行</span><br />
    <span>3-5. 根据不同的屏幕尺寸加载不同的css样式</span><br />
    <code class="code">
      {{_link1}}
    </code><br />
    <span>4. 即时更新</span><br />
    <span>5. 新标签和新元素，提供更多的开发支持，提高可读性，提升SEO</span><br />
    <hr>
    <p>缺点：</p>
    <span>新技术，浏览器支持程度不一样</span><br />
  </article>
</template>

<script>
// const prefix = '``` js'
// const suffix = '```'
// const he = '### hello'
export default {
  name: 'Audition2',
  data() {
    return {
      /* text: `${he} 
      \n${prefix}  
      function hello() {
        console.log('world')
      }
      \n${suffix}` */
      _code1: `<meta name="viewport" content="width=device-width, initial-scale=1" />`,
      _link1: `<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 600px)"
      href="style/css/css600.css" />`
    }
  }
}
</script>

<style lang="less" scoped>
</style>